<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>融昌建材全产业链工作台</title>
    <link rel="icon" href="images/icon.png">
    <link rel="stylesheet" type="text/css" href="css/header.css" />
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="css/themes/default.css" media="all">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            position: relative;
            top: 270px;
            left: 40px;
            width: 1535px;
            height: 700px;
        }

        .dropbtn:hover {
            color: black;
        }

        .baseInfo {
            width: 1220px;
            height: 340px;
            /* background-color: antiquewhite; */
        }

        .mimg {
            width: 300px;
            margin: 20px 20px 20px 0;
            cursor: pointer;
            vertical-align: middle
        }

        .baseInfo-text {
            display: inline-block;
            vertical-align: middle;
            width: 895px;
            height: 100%;
        }

        .mname {
            font-size: 20px;
            font-weight: bold;
            margin: 20px 0 0 20px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #ccc;
        }

        .mprice {
            font-size: 24px;
            font-weight: bold;
            margin: 20px 0 0 20px;
            padding-bottom: 20px;
            border-bottom: 1px dashed #ccc;
            color: rgb(75, 145, 225);
        }

        .mtype {
            margin: 15px 0 0 20px;
        }

        button {
            margin: 15px 0 5px 20px;
        }

        .showMore {
            width: 1220px;
            height: 500px;
            /* background-color: aquamarine; */
        }

        .showMoreL {
            width: 220px;
            height: 100%;
            /* background-color: azure; */
            margin-right: 10px;
            display: inline-block;
            vertical-align: middle;
        }

        .showMoreR {
            width: 985px;
            height: 100%;
            /* background-color: beige; */
            display: inline-block;
            vertical-align: middle;
        }

        .company {
            width: 100%;
            height: 120px;
            /* background-color: beige; */
        }

        .infoTitle {
            width: 100%;
            height: 50px;
            background-color: rgb(235, 235, 235);
            position: relative;
            left: 0;
            text-align: center;
        }

        .infoTitle img {
            height: 20px;
            vertical-align: middle;
            margin-top: 15px;
        }

        .infoTitle span {
            display: inline-block;
            vertical-align: middle;
            color: grey;
            margin-top: 15px;
        }

        .shopRecommend {
            margin-top: 20px;
            width: 218px;
            height: 360px;
            /* background-color: chartreuse; */
        }

        .cardTitle {
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
            font-weight: bold;
            border-left: 5px solid rgb(75, 145, 225);
        }

        .recommendItem {
            width: 200px;
            height: 100px;
            margin-left: 10px;
            /* background-color: coral; */
            border-bottom: 1px solid #ccc;
        }

        .recommendItem:hover {
            cursor: pointer;
        }

        .recommendItem img {
            width: 80px;
            margin: 10px 10px 10px 0;
            display: inline-block;
            vertical-align: middle;
        }

        .recommendItem-text {
            display: inline-block;
            vertical-align: middle;
        }

        .recommendItem-text p {
            margin-bottom: 10px;
            font-size: 14px;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="headerTips">
            <div class="headerTipsL">
                <div class="beforeLogin">
                    <a href="login.html" id="login">请登录</a>
                    <a href="register.html" id="register">免费注册</a>
                </div>
                <div class="afterLogin">
                    <a style="color: black;" id="username">赵先生</a>
                    <img src="images/邮箱.png" alt="" style="cursor: pointer;">
                    <span id="exit"
                        style="cursor: pointer;color:rgb(75, 145, 225);font-size: 14px;margin-left: 20px;">退出</span>
                </div>
            </div>
            <div class="headerTipsR">
                <ul>
                    <div class="dropdown" id="dropdown1">
                        <a href="page/gdzx.html" class="dropbtn">工地中心<img src="images/down.png" alt=""></a>
                        <div class="dropdown-content" id="dropdown-content1">
                            <a href="#">我的订单</a>
                            <a href="#">我的合同</a>
                            <a href="#">我的消息</a>
                        </div>
                    </div>
                    <div class="dropdown" id="dropdown2">
                        <a href="#" class="dropbtn">OEM中心<img src="images/down.png" alt=""></a>
                        <div class="dropdown-content" id="dropdown-content2">
                            <a href="#">入住平台</a>
                            <a href="#">我的任务</a>
                            <a href="#">我的消息</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <a href="#" class="dropbtn"><img src="images/bars.png" alt="">收藏中心</a>
                    </div>
                </ul>
            </div>
        </div>
        <div class="headerAdv">
            <a href=""><img src="images/首页/首页广告.png" style="width: 100%;" alt=""></a>
        </div>
        <div class="headerTitle">
            <div class="logo"><img src="images/logo.png" alt=""></div>
            <div class="title">
                <h1 style="font-weight: bold;">建材一站式服务平台</h1>
            </div>
            <div class="location">
                <p>郑州站</p>
                <a href="">【城市切换】</a>
            </div>
            <div class="search">
                <span class="search-text">全站搜索</span>
                <input type="text" name="" id="" value="请输入关键字查询相关资料">
                <span class="searchbtn" style="right: -6px;"><a href="#">搜索</a></span>
            </div>
        </div>
        <div class="headerbtn">
            <div class="dropdown" id="jcxg">
                <a href="buyMaterial.html" class="dropbtn" onclick=" var contract = 0;
                if (document.getElementById('contract1').style.color == 'grey' || document.getElementById('contract2').style
                    .color == 'grey')
                    {contract = 1};
                this.href = 'buyMaterial.html?contract=' + contract;">建材选购<img src="images/down2.png" alt=""
                        style="width: 18px;margin-left: 5px;" id="jcxgbtn"></a>
                <div class="dropdown-content" style="height: 350px;">
                    <div class="xd" id="htxd">
                        <span class="xd-title">合同下单</span>
                        <div style="margin-left: 10px;">
                            <span href="" class="choice">旭辉运河悦章</span>
                            <span href="" class="choice">旭辉运河悦章</span>
                        </div>
                    </div>
                    <div class="xd" id="ptxd">
                        <span class="xd-title">普通下单</span>
                        <div class="nj">
                            <img src="images/分类.png" alt=""
                                style="width: 30px;margin-left: 10px;display:inline-block;vertical-align: middle;">
                            <span
                                style="color: rgb(75, 145, 225);height: 30px;line-height:30px;display:inline-block;vertical-align: middle;">砂浆</span>
                        </div>
                        <div style="margin-left: 10px;">
                            <span href="" class="choice">水泥泥浆</span>
                            <span href="" class="choice">混合砂浆</span>
                            <span href="" class="choice">特种砂浆</span>
                            <br>
                            <span href="" class="choice">其他砂浆</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="changePage">
                <span href="" id='page1' style="color: rgb(75, 145, 225);
                border-bottom: 5px solid rgb(75, 145, 225)">首页</span>
                <span href="" id="page2">全部商品</span>
                <span href="" id="page3">平台服务</span>
                <span href="" id="page4">骆驼快讯</span>
                <span href="" id="page5">推广有礼</span>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="nav">
            <a href="index.html">首页</a>
            <span>>></span>
            <a href="buyMaterial.html" onclick="var url = window.location.href;
            var param = url.split('?');
            var params = param[1].split('&');
            var mid = params[0].split('=')[1];
            var contract = params[1].split('=')[1];
            this.href='buyMaterial.html?contract='+contract">建材选购</a>
            <span>>></span>
            <a href="#">商品详情</a>
        </div>
        <div class="baseInfo">
            <img src="https://pic.imgdb.cn/item/620121c22ab3f51d911834c8.jpg" alt="" class="mimg">
            <div class="baseInfo-text">
                <p class="mname">砖头</p>
                <p class="mprice">¥1000.00</p>
                <p class="mtype">规格型号：DMP15</p>
                <button type="button" class="layui-btn layui-btn-primary" style="border-radius: 5px;width: 110px;"
                    id="guige">
                    <img src="images/规格.png" alt="" style="width: 20px;" id="guige-icon">
                    <span class="unit">1吨</span>
                </button>
                <div style="margin:15px 0 5px 20px">
                    <img src="images/减.png" alt="" style="width: 28px;cursor: pointer;" id="sub">
                    <input type="text" value="1" style="outline: none;margin:0 5px;width: 50px;text-align: center;"
                        class="number">
                    <img src="images/加.png" alt="" style="width: 28px;cursor: pointer;" id="add">
                    <span style="margin-left: 20px;">已售</span><span class="sales">0</span>
                </div>
                <div>
                    <button type="button" class="layui-btn layui-btn-primary" style="border-radius: 5px;width: 110px;"
                        id="buynow">立即购买</button>
                    <button type="button" class="layui-btn layui-btn-primary"
                        style="border-radius: 5px;width: 110px;margin-left: 20px;" id="cart">加入购物车</button>
                </div>
            </div>
        </div>
        <div class="showMore">
            <div class="showMoreL">
                <div class="company">
                    <div class="infoTitle">
                        <img src="images/shop.png" alt="">
                        <span>河南融昌建材有限公司</span>
                    </div>
                    <div style="width: 218px;height: 70px;border: 1px solid #ccc;border-top: none;">
                        <button type="button" class="layui-btn layui-btn-primary"
                            style="border-radius: 5px;width: 160px;margin: 16px 30px;">看看它</button>
                    </div>
                </div>
                <div class="shopRecommend">
                    <div class="infoTitle">
                        <img src="images/王冠.png" alt="">
                        <span>店铺推荐</span>
                    </div>
                    <div style="width: 216px; border: 1px solid #ccc;
                    border-top: none;">
                        <div class="recommendItem" id="item1" name="good2">
                            <img src="https://pic.imgdb.cn/item/620123832ab3f51d9119f045.jpg" alt="" class="mimg2">
                            <div class="recommendItem-text">
                                <p class="mname2">钢板</p>
                                <p class="mprice2" style="font-weight: bold;color: rgb(75, 145, 225);">¥1000.00/吨</p>
                            </div>
                        </div>
                        <div class="recommendItem" id="item2" name="good5">
                            <img src="https://pic.imgdb.cn/item/620122082ab3f51d911875b3.jpg" alt="" class="mimg2">
                            <div class="recommendItem-text">
                                <p class="mname2">木板</p>
                                <p class="mprice2" style="font-weight: bold;color: rgb(75, 145, 225);">¥1000.00/吨</p>
                            </div>
                        </div>
                        <div class="recommendItem" id="item3" name="good8" style="border-bottom: none;">
                            <img src="https://pic.imgdb.cn/item/620121c22ab3f51d911834c8.jpg" alt="" class="mimg2">
                            <div class="recommendItem-text">
                                <p class="mname2">砖头</p>
                                <p class="mprice2" style="font-weight: bold;color: rgb(75, 145, 225);">¥1000.00/吨</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="showMoreR">
                <p class="cardTitle"
                    style="font-weight: 400;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;">
                    货物详情</p>
                <img src="images/首页/预拌抹灰砂浆more.png" alt="" style="width: 100%;margin-top: 15px;" class="moreInfo">
            </div>
        </div>
    </div>
    </div>
    </div>
    <script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="js/lay-config.js?v=2.0.0" charset="utf-8"></script>
    <script>
        function clearCookie() {
            let paths = ['/']
            let domain = []
            let host = location.hostname
            domain.push(host)
            if (host.indexOf('www') > -1) {
                domain.push(host.substr(3))
            }
            let keys = document.cookie.match(/[^ =;]+(?=\=)/g)

            function deleteCookie(name, path, domain) {
                let keys = document.cookie.match(/[^ =;]+(?=\=)/g) || []
                if (keys.indexOf(name) < 0) return
                document.cookie = name + '=' + ((path) ? ';path=' + path : '') + ((domain) ? ';domain=' + domain : '') +
                    ';expires=Thu,01-Jan-1970 00:00:01 GMT';
            }
            // 确保paths、domain、keys都不相同，都要进行清除
            paths.forEach(p => {
                domain.forEach(d => {
                    keys.forEach(k => {
                        deleteCookie(k, p, d)
                    })
                })
            })
        }
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.jquery,
                layer = layui.layer;
            var remember = 0; //是否记住密码
            var password = '';
            var username = '';
            var url = window.location.href;
            var param = url.split('?');
            var params = param[1].split('&');
            var mid = params[0].split('=')[1];
            var contract = params[1].split('=')[1];
            $('body').ready(function () {
                if (contract == '1') {
                    $('#guige').css('display', 'none');
                }
                var strCookie = document.cookie;
                if (strCookie != '') {
                    var arrCookie = strCookie.split("; ");
                    for (i = 0; i < arrCookie.length; i++) {
                        var arr = arrCookie[i].split("=");
                        if (arr[0] == 'username')
                            username = arr[1];
                        else if (arr[0] == 'remember')
                            remember = 1;
                        else if (arr[0] == 'password')
                            password = arr[1];
                    }
                }
                if (username != '') {
                    $('.beforeLogin').css('display', 'none');
                    $('.afterLogin').css('display', 'block');
                    document.getElementById('username').innerText = username;
                } else {
                    $('.beforeLogin').css('display', 'block');
                    $('.afterLogin').css('display', 'none');
                }
                var data = {
                    mid: mid
                };
                $.get('mdetail', data, function (re) {
                    var i = 0;
                    var flag = 0;
                    for (i = 0; i < re.length; i++)
                        if (re[i].mid == mid)
                            break;
                    $('.mname').text(re[i].mname);
                    $('.mprice').text('¥' + re[i].mprice);
                    $('.unit').text('1' + re[i].unit);
                    $('.sales').text(re[i].sales);
                    $('.mimg').attr('src', re[i].mimg);
                    $('.moreInfo').attr('src', re[i].moreInfo);
                    var N = 1;
                    for (j = 0; j < re.length; j++) {
                        if (j == i)
                            continue;
                        else {
                            $('#item' + N + ' .mname2').text(re[j].mname);
                            $('#item' + N + ' .mprice2').text('¥' + re[j].mprice + '/' + re[j]
                                .unit);
                            $('#item' + N + ' .mimg2').attr('src', re[j].mimg);
                            $('#item' + N).attr('name', 'good' + re[j].mid);
                            N++;
                        }
                    }

                })
            })
            $('#exit').on('click', function () {
                $('.beforeLogin').css('display', 'block');
                $('.afterLogin').css('display', 'none');
                clearCookie();
                if (remember)
                    document.cookie = "remember=1";
                if (password != '')
                    document.cookie = "password=" + password;
                if (username != '')
                    document.cookie = "username=" + username;
            })
            $('.search input').on('focus', function () {
                $(this).val('');
                $(this).css('color', 'black');
            })
            $('.search input').on('blur', function () {
                if ($(this).val() == '') {
                    $(this).val('请输入关键字查询相关资料');
                    $(this).css('color', '#ccc');
                } else {
                    $(this).css('color', 'black');
                }
            })
            $('.choice').on('click', function () {
                if ($(this).css('color') == 'rgb(156, 156, 156)') {
                    $(this).css('color', 'grey');
                    $(this).css('border', '1px solid grey');
                } else {
                    $(this).css('color', '#ccc');
                    $(this).css('border', '1px solid #ccc');
                }
            })
            $('.choice').on('mouseover', function () {
                if ($(this).css('color') != 'rgb(128, 128, 128)') {
                    $(this).css('color', 'rgb(156, 156, 156)');
                    $(this).css('border', '1px solid rgb(156, 156, 156)');
                }
            })
            $('.choice').on('mouseout', function () {
                if ($(this).css('color') != 'rgb(128, 128, 128)') {
                    $(this).css('color', '#ccc');
                    $(this).css('border', '1px solid #ccc');
                }
            })
            $('.changePage span').on('click', function () {
                for (i = 1; i < 6; i++) {
                    $('#page' + i).css('color', 'black');
                    $('#page' + i).css('border', 'none');
                }
                $(this).css('color', 'rgb(75, 145, 225)');
                $(this).css('border-bottom', '5px solid rgb(75, 145, 225)');
            })
            $('.mimg').on('click', function () {
                var src = $(this).attr('src');
                layer.open({
                    type: 1,
                    title: '查看大图',
                    content: '<img src="' + src + '" style="margin:5px"></img>'
                });
            })
            $('.baseInfo input').on('blur', function () {
                if ($(this).val() == '') {
                    $(this).val('1');
                } else {
                    $(this).val(n);
                }
            })
            $('#add').on('click', function () {
                var num = $('.baseInfo input').val();
                $('.baseInfo input').val(parseInt(num) + 1);
            })
            $('#add').on('mouseover', function () {
                $(this).attr('src', 'images/加2.png');
            })
            $('#add').on('mouseout', function () {
                $(this).attr('src', 'images/加.png');
            })
            $('#sub').on('click', function () {
                var num = $('.baseInfo input').val();
                if ((parseInt(num) - 1) != 0)
                    $('.baseInfo input').val(parseInt(num) - 1);
                else
                    layer.msg('已减至最小');
            })
            $('#sub').on('mouseover', function () {
                $(this).attr('src', 'images/减2.png');
            })
            $('#sub').on('mouseout', function () {
                $(this).attr('src', 'images/减.png');
            })
            $('#guige').on('click', function () {
                if ($(this).css('color') != 'rgb(255, 255, 255)') {
                    $(this).css('background-color', 'rgb(75, 145, 225)');
                    $(this).css('color', 'white');
                    $('#guige-icon').attr('src', 'images/规格2.png');

                } else {
                    $(this).css('background-color', 'white');
                    $(this).css('color', 'rgb(51, 51, 51)');
                    $('#guige-icon').attr('src', 'images/规格.png');
                }
            })
            $('.recommendItem').on('click', function () {
                var id = $(this).attr('name');
                alert(id);
                var mid = id.substr(4, id.length);
                window.location = 'materialDetail.html?mid=' + mid + '&contract=' + contract;
            })
            $('#cart').on('click', function () {
                if ($('#guige').css('color') != 'rgb(255, 255, 255)' && $('#guige').css('display') !=
                    'none')
                    layer.msg('尚未选择商品型号！');
                else {
                    data = {
                        username: username,
                        mid: mid,
                        number: $('.number').val(),
                        type: 'c',
                        mode2: '1',
                        contract: contract
                    }
                    $.get('cart', data, function (re) {
                        if (re == '0')
                            data.mode = '0'; //增加新商品
                        else {
                            data.mode = '1'; //增加数量
                            data.number2 = re.number;
                        }
                        data.mode2 = '1'; //查询购物车内是否有此货物
                        $.get('insert', data, function (re2) {
                            if (re2 == '1')
                                layer.msg('已添加至购物车');
                        })
                    })
                }
            })
            $('#buynow').on('click', function () {
                if ($('#guige').css('color') != 'rgb(255, 255, 255)' && $('#guige').css('display') !=
                    'none')
                    layer.msg('尚未选择商品型号！');
                else {
                    var num = parseInt($('.number').val());
                    if (contract == '0')
                        window.location = 'confirm.html?mid=' + mid + '&num=' + num;
                    else
                        window.location = 'confirm2.html?mid=' + mid + '&num=' + num;
                }
            })
        })
    </script>
</body>

</html>